<template>
    <div id="each-invoice">
        <!-- 每张发票详情 -->
        <div class="deposit-content">
            <div class="top-bg">
                <van-nav-bar class="header" fixed :border="false" @click-left="diffBack">
                        <div class="left"
                            slot="left">
                            <van-icon name="arrow-left"
                                    size="24px"
                                    color="#fff" />
                        </div>
                        <div class="title"
                            slot="title">{{title}}</div>
                    </van-nav-bar>
            </div>
            <div class="reset-wrapper">
                <div class="reset-content">
                    <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> 
                        <van-list
                            :loading="loading"
                            :finished="finished"
                            finished-text="没有更多了"
                            @load="onLoad"
                            class="list-box"
                        >
                            <van-cell-group class="group-case" v-for="(itemA, indexA) in list" :key="indexA">
                                <div class="mid-case">
                                    <div class="address-content">
                                        <div class="left-case">
                                            <div class="has-case" @click="getUid(itemA.uid)">
                                                <div class="name-phone">
                                                    <div class="name-case">{{itemA.userName}}</div>
                                                    <div class="phone-case">{{itemA.phone}}</div>
                                                </div>
                                                <div class="address-details">{{itemA.provinceName}}{{itemA.cityName}}{{itemA.areaName}}{{itemA.addressInfo}}</div>
                                            </div>
                                        </div>
                                        <div class="right-case" @click="editAddrees(itemA.uid)">编辑</div>
                                    </div>
                                    <div class="bar-decoration"><img src="@/assets/img/public/addressBot.png" alt=""></div>
                                </div>
                            </van-cell-group>
                        </van-list>
                    </van-pull-refresh>
                </div>
            </div>
            <div class="btn-case bgwrite">
                <div class="active-btn"  v-if="submitB" @click="addAddress">添加新地址</div>
                <div class="disable-btn" v-if="!submitB">添加新地址</div>
            </div>
      </div>
    </div>
</template>
<script>
import {getuserUid} from '@/utils/auth.js'
import { mapMutations, mapState } from "vuex";
export default {
  components: {
  },
  data() {
    return {
      title: '选择联系方式',
      submitB: true,
      list: [],
      loading: false,
      isLoading: false,
      finished: false,
      pageNum: 0,
      pageSize: 3,
      oladParams: {},
    }
  },
  computed: {
  },
  created() {},
  methods: {
      diffBack(){
          this.$router.push({name:'designer-eachInvoice', params:{fromW: 'addressList'}})
      },
      getUid(addressUid) {
          this.list.forEach((item)=>{
            if(item.uid == addressUid) {
                this.setEditAddrerss(item)
            }
        })
          this.$router.push({name:'designer-eachInvoice', params:{fromW: 'addressList'}})
      },
    //   添加地址
    addAddress(){
        this.submitB = false
        this.$router.push({name:'designer-addresEditing', params: {fromInvoice: 'newInvoice'}})
    },
    // 编辑地址
    editAddrees(id) {
        this.list.forEach((item)=>{
            if(item.uid == id) {
                this.setEditAddrerss(item)
            }
        })
        // 便利  选好的子对象  存入状态管理 跳转下个页面之后把数据从mapState
        this.$router.push({name:'designer-addresEditing', params: {fromInvoice: 'oldInvoice'}})
    },
    // 地址列表
    async requestList(params, cb) {
      this.oladParams = params
      try {
            let responseList = await HTTP('app/userAddress/userAddressList', params)                
            if(responseList.code !== 200){
                this.$toast(responseList.msg || '服务器异常')
                return
            }
            let res = responseList.data.list.map(e => {
                return {
                    ...e
                }
            })
            cb && cb(res)
        } catch (error) {
            this.$toast('数据开小差了')
            cb && cb()
        }
    },
    onRefresh(){
        this.isLoading = true
        this.loading = true
        this.pageNum = 1
        this.requestList({...this.oladParams, pageNum: 1}, (data) => {
            this.list = data
            // 太慢了不差半秒，太快需要延时（因为用户在滑动的时候有心理准备，速度太快了反而担心这是假的）
            setTimeout(() => {
                this.isLoading = false
                this.loading = false
                // 因为是刷新，所以，这个是执行onLoad，进入onLoad之后会进行list的loading的修改状态，从而重新进入onLoad
                this.onLoad()
            }, 500)
        })
    },
    onLoad(){
        this.loading = true
        this.pageNum += 1
        let params = {
            userUid: getuserUid(),
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            addressType: 1
        }
        setTimeout(() => {
            this.requestList(params, (data) => {
                this.loading = false
                if(params.pageNum === 1){
                    this.list = data
                }else{
                    this.list.push(...data)
                }
                if(data && data.length === 0){
                    this.finished = true
                } else if (this.list.length==0) {
                    this.isShow = true
                    this.finished = false
                }
            })
        }, 0)
    },
    ...mapMutations(['setInvoiceObj','setEditAddrerss'])
  }
};
</script>

<style lang="scss" scoped>
#each-invoice {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #F9F9F9;
    .deposit-content{
        position: relative;
        width: 100%;
        height: 100%;
        .top-bg{
            width: 100%;
            background: #fff;
            border-bottom-left-radius: 0.5rem;
            border-bottom-right-radius: 0.5rem;
            .header {
                background: #5E8EFE;
                color: #ffffff;
                height: 0.92rem;
                .title {
                    color: #ffffff;
                    font-size: 0.35rem;
                    }
            }
        }
        .reset-wrapper{
            position: fixed;
            width: 100%;
            top: 0.92rem;
            left: 0;
            overflow-y: scroll;
            overflow-x: hidden;
            bottom: 1.6rem;
            .reset-content{
                width: 100%;
                padding: 0.24rem;
                box-sizing: border-box;
                border-radius: 0.1rem;
                .group-case{
                    margin-bottom: 0.24rem;
                    border-radius: 0.1rem;
                    padding: 0.24rem;
                    box-sizing: border-box;
                    width: 100%;
                    .mid-case{
                        width: 100%;
                        position: relative;
                        height: auto;
                        div{
                            display: inline-block;
                            height: 0.52rem;
                            line-height: 0.52rem;
                        }
                        .cell-title{
                            width: 1.8rem;
                            color: #656565;
                            font-size: 0.28rem;
                        }
                        .content-case{
                            position: absolute;
                            left: 1.8rem;
                            border: none;
                            right: 0rem;
                            font-size: 0.28rem;
                            font-family: PingFangSC-Regular;
                            font-weight: 400;
                            span{
                                color: #5E8EFE;
                                font-size: 0.36rem;
                                font-family: PingFangSC-Semibold;
                                font-weight: 600;
                                margin-right: 0.1rem;
                            }
                            input{
                                width: 100%;
                                word-wrap: normal;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                overflow: hidden;
                                border: none;
                                color: #282828;
                                font-size: 0.28rem;
                                font-family: PingFangSC-Regular;
                                font-weight: 400;

                                &::-webkit-input-placeholder {
                                    color: #CCCCCC;
                                    font-size: 0.28rem;
                                    font-family: PingFangSC-Regular;
                                    font-weight: 400;
                                }
                            }
                        }
                        .address-content{
                            position: relative;
                            width: 100%;
                            height: 2.28rem;
                            .left-case{
                                position: absolute;
                                height: 2.28rem;
                                top:0;
                                left: 0;
                                right: 1rem;
                                .has-case{
                                    width: 100%;
                                    height: 100%;
                                   .name-phone{
                                       width: 100%;
                                       margin-bottom: 0.2rem;
                                       div{
                                           display: inline-block;
                                           color: #282828;
                                           font-size: 0.36rem;
                                           font-family: PingFangSC-Semibold;
                                           font-weight: 600;
                                       }
                                       .name-case{
                                            max-width: 45%;
                                            padding-right: 0.4rem;
                                            word-wrap: normal;
                                            text-overflow: ellipsis;
                                            white-space: nowrap;
                                            overflow: hidden;
                                       }
                                       .phone-case{
                                           vertical-align: top;
                                       }
                                   } 
                                   .address-details{
                                       height: 0.88rem;
                                       color: #282828;
                                       font-size: 0.28rem;
                                       font-family: PingFangSC-Regular;
                                       font-weight: 400;
                                       line-height: 0.44rem;
                                       display:-webkit-box;
                                       overflow:hidden;
                                       text-overflow:ellipsis;
                                       -webkit-line-clamp:2;
                                       -webkit-box-orient:vertical;
                                   }
                                }
                            }
                            .right-case{
                                position: absolute;
                                width: 1rem;
                                height: 2.28rem;
                                text-align: center;
                                top: 50%;
                                right: -0.24rem;
                                color: #959595;
                                line-height: 2.28rem;
                                font-size: 0.26rem;
                                transform: translate(0,-50%);
                            }

                        }
                        .bar-decoration{
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            width: 100%;
                            height: 0.1rem;
                            img{
                                position: absolute;
                                bottom: 0;
                                left: 0;
                                width: 100%;
                                height: 0.1rem;
                                width: 100%;
                                height: 0.1rem;
                            }
                        }
                    }
                }
            }
        }
        .btn-case{
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1.6rem;
            box-sizing: border-box;
            box-shadow:0px 2px 8px 4px rgba(216,216,216,0.5);
            padding: 0.36rem;
            div{
                width: 100%;
                border-radius: 0.1rem;
                height: 0.88rem;
                line-height: 0.88rem;
                text-align: center;
                font-size: 0.26rem;
                font-family: PingFangSC-Semibold;
                font-weight: 600;
                color: #fff;
            }
            .active-btn{
                background: #5E8EFE; 
            }
            .disable-btn{
                background: #DFE8FF;

            }
        }
    }
}
</style>
